<template>
    <div class="input">
        <el-input v-model="name" style="width: 500px" placeholder="请输入相册名称" />
        <div class="box">
            <el-upload v-model:file-list="fileList" action="http://localhost:4000/api/search/upload"
                list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" name="imgUrls"
                :auto-upload="false"
                style="margin-top: 20px; margin-left: 70px; margin-bottom: 15px; display: block;"
                :before-upload="beforeUpload">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>
            <el-dialog v-model:visible="dialogVisible">
                <img :src="dialogImageUrl" alt="Preview Image" style="width: 100%;" />
            </el-dialog>
        </div>
        <div style="margin-top: 20px;">
            <el-button type="primary" @click="upload">点击上传</el-button>
            <el-button type="danger" @click="clear">点击清空</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { uploadImg } from '../../api/request'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { ElMessage } from 'element-plus'

// 相册名称
const name = ref<string>('')

// 图片文件列表
const fileList = ref<UploadUserFile[]>([])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}

const upload = async () => {
    const formData = new FormData();

    // console.log('相册名称:', name.value); // 调试日志，打印相册名称
    // console.log('文件列表:', fileList.value); // 调试日志，打印文件列表

    if (name.value !== '' && fileList.value.length > 0) {
        formData.append('name', name.value); // 确保这里添加了名称
        fileList.value.forEach(file => {
            formData.append('imgUrls', file.raw);
        });

        // 打印 FormData 内容
        // for (const [key, value] of formData.entries()) {
        //     console.log(key, value); // 打印 FormData 的所有内容
        // }

        // 发送请求
        try {
            const response = await uploadImg(formData);
            ElMessage({
                message: '上传成功',
                type: 'success',
            });
            name.value = '';
            fileList.value = [];
            console.log(response);
        } catch (error) {
            ElMessage.error('上传失败');
            console.error('上传错误:', error); // 打印上传错误信息
        }
    } else {
        console.log('请提供相册名称和至少一张图片');
        ElMessage({
            message: '请提供相册名称和至少一张图片',
            type: 'warning',
        });
        return false;
    }
};

// 清空函数
const clear = () => {
    name.value = ''
    fileList.value = []
}

const beforeUpload = (file) => {
    return true; // 允许上传
}
</script>

<style scoped>
.input {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
}

.box {
    width: 100%;
    border: 2px solid #ccc;
    margin-top: 20px;
}
</style>